<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <title>教师列表</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
        }

        .table .text {
            /* padding-top: 10px !important; */
        }

        .table th,
        .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script>
        /**
         * dom加载完成之后，自动执行
         */
        $(function () {
            let adminHome = new AdminHome();
            // 获取教师列表数据
            adminHome.queryAll(null);
            // 初始化模态框
            adminHome.initModal();
            // 初始化点击事件
            adminHome.click();
        })

        class AdminHome {
            constructor() {
            }

            /**
             * 根据关键字从服务端获取教师列表信息
             * @param keywords
             */
            queryAll(keywords) {
                if (!keywords) {
                    keywords = "";
                }
                // 为了防止添加的数据重复，所以需要清空之前添加的数据
                $(".table tbody").empty();
                // 测试数据
                for (let i = 0; i < 5; i++) {
                    $(`
                        <tr>
                            <td class="text">1</td>
                            <td class="text">T10000</td>
                            <td class="text">张老师</td>
                            <td>
                                <img src="static/img/pic7.jpeg" alt="" class="img-circle" style="width:40px;">
                            </td>
                            <td class="text">男</td>
                            <td class="text">13800000000</td>
                            <td class="text">教授</td>
                            <td class="text">
                                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-userid=1
                                    data-username=T10000 data-nickname=张老师 data-gender=男
                                    data-phone=13800000000 data-rank=教授 >编辑</button>
                                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" data-userid=1>删除</button>
                            </td>
                        </tr>
                        `).appendTo($(".table tbody"))
                }
                // 我们在前端访问服务端接口使用jQuery提供的ajax
                $.ajax({
                    type: 'GET',// 提交方式，跟接口规定的一致
                    url: `/SelectCourse2/teacher/queryAll?keywords=${keywords}`,// url服务端的接口地址
                    cache: false,// 不启用缓存
                    dataType: 'json',// 期望后端返回的数据的类型
                    success: function (res) {// success,成功响应后自动执行，res封装后端响应回来的信息
                        console.log("返回教师列表信息", res)
                        if (res.code == 1) {// 数据查询成功
                            // 判断后端是否传过来列表数据
                            if (res.result && res.result.length > 0) {// 有数据
                                // 遍历教师数据
                                for (let teacher of res.result) {
                                    $(`
                                      <tr>
                                        <td class="text">${teacher.userId}</td>
                                        <td class="text">${teacher.username}</td>
                                        <td class="text">${teacher.nickname}</td>
                                        <td>
                                            <img src="static/img/pic7.jpeg" alt="" class="img-circle" style="width:40px;">
                                        </td>
                                        <td class="text">${teacher.gender}</td>
                                        <td class="text">${teacher.phone}</td>
                                        <td class="text">${teacher.rank}</td>
                                        <td class="text">
                                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-userid=${teacher.userId}
                                    data-username=${teacher.username} data-nickname=${teacher.nickname} data-gender=${teacher.gender}
                                    data-phone=${teacher.phone} data-rank=${teacher.rank} >编辑</button>
                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal" data-userid=${teacher.userId}>删除</button>
                                        </td>
                                      </tr>
                                    `).appendTo($(".table tbody"))
                                }
                            } else {// 无数据
                                $(`
                                  <tr>
                                      <td colspan="8" style="text-align: center;border:none;padding: 150px 0;">当前没有查询到数据！</td>
                                  </tr>
                                `).appendTo($(".table tbody"))
                            }
                        } else {// 数据查询失败

                        }
                    },
                    error: function (err) {
                        console.log("Error=>", err);
                    }
                })
            }

            /**
             * 管理所有的点击事件
             */
            click() {
                // 点击事件中，无法获取到对象中的this
                let that = this;
                $("#searchBtn").click(function () {
                    // 获取搜索输入框中内容
                    let keywords = $("#searchValue").val();
                    // 访问服务器
                    that.queryAll(keywords);

                })
                // 提交表单
                $("#save-btn").click(function () {
                    that.save();
                })
                // 删除教师
                $("#del-btn").click(function () {
                    // 获取userId
                    let userId = $("#userId2").val()
                    if (userId) {
                        $.ajax({
                            type: 'get',// 请求方式
                            url: '/SelectCourse2/teacher/delete?teacherId=' + userId,// 请求url
                            cache: false,// 缓存
                            dataType: 'json',// 期望服务端返回的类型
                            success: function (res) {// res = {code:数值,msg:'字符串',result:[]/{}}
                                if (res.code == 1) {// 删除成功
                                    bootoast({
                                        message: res.msg,
                                        type: 'success',
                                        position: 'top',
                                        timeout: 2  // 2秒之后消失
                                    });
                                } else {// 删除失败
                                    bootoast({
                                        message: res.msg,
                                        type: 'danger',
                                        position: 'top',
                                        timeout: 2
                                    });
                                }
                                // 更新列表
                                that.queryAll(null);
                                // 关闭修改模态框
                                $('#deleteModal').modal('hide')
                            },
                            error: function (err) {
                                console.log("teacher-delete---Error=>", err)
                                bootoast({
                                    message: '服务器响应异常',
                                    type: 'danger',
                                    position: 'top',
                                    timeout: 2
                                });
                            }
                        })
                    }

                })
            }

            /**
             * 修改老师信息
             * @returns {boolean}
             */
            save() {
                let that = this;
                // 非空校验
                let userId = $("#userId").val();
                let username = $("#username").val();
                let nickname = $("#nickname").val();
                let gender = $("input[name=gender]:checked").val();
                let phone = $("#phone").val();
                let rank = $("#rank option:selected").val();

                console.log(username, nickname, gender, phone, rank);
                // 进行非空校验
                if (!nickname || nickname === '') {
                    bootoast({
                        message: '姓名不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!gender || gender === '') {
                    bootoast({
                        message: '性别不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!phone || phone === '') {
                    bootoast({
                        message: '手机不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!rank || rank === '') {
                    bootoast({
                        message: '职称不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                console.log(`userId=${userId}&username=${username}&nickname=${nickname}&gender=${gender}&phone=${phone}&rank=${rank}`);
                // 提交表单
                $.ajax({
                    type: 'post',// 提交方式 post
                    url: $("#myForm").attr("action"),// /SelectCourse/teacher/update
                    cache: false,// 不启用缓存
                    data: `userId=${userId}&username=${username}&nickname=${nickname}&gender=${gender}&phone=${phone}&rank=${rank}`,
                    dataType: 'json',// 期望服务器响应的数据类型 json
                    success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                        console.log(result);
                        // 提示
                        bootoast({
                            message: result.msg,
                            type: 'success',
                            position: 'top',
                            timeout: 2
                        });
                        // 更新列表
                        that.queryAll(null);
                        // 关闭修改模态框
                        $('#exampleModal').modal('hide')
                    },
                    error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                        // 提示
                        bootoast({
                            message: '服务器请求错误！',
                            type: 'danger',
                            position: 'top',
                            timeout: 2
                        });
                    }

                })
                return true;
            }

            /**
             * 管理模态框
             */
            initModal() {
                // 处理修改模态框
                $('#exampleModal').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    let button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据，数据是在 编辑 按钮上通过 data-属性名 的方式传递
                    //------------------------------------------------------------------改动开始1
                    let userId = button.data('userid');// 绿色key对应data-key
                    let username = button.data('username');
                    let nickname = button.data('nickname');
                    let gender = button.data('gender');
                    let phone = button.data('phone');
                    let rank = button.data('rank');
                    //------------------------------------------------------------------改动结束1
                    var modal = $(this)
                    //------------------------------------------------------------------改动开始2
                    // 给模态框中的表单绑定数据（处理常规的input标签）
                    modal.find('.modal-body #userId').val(userId)
                    modal.find('.modal-body #username').val(username)
                    modal.find('.modal-body #nickname').val(nickname)
                    modal.find('.modal-body #phone').val(phone)
                    // 处理性别(单选按钮)
                    modal.find(`.modal-body input[name=gender][value=${gender}]`).attr("checked", true);
                    // 处理职称（下拉框）
                    modal.find(`.modal-body #rank option[value=${rank}]`).attr("selected", true);
                    //------------------------------------------------------------------改动结束2
                })
                // 处理删除模态框
                $('#deleteModal').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    let button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据，数据是在 编辑 按钮上通过 data-属性名 的方式传递
                    //------------------------------------------------------------------改动开始1
                    let userId = button.data('userid');// 绿色key对应data-key
                    //------------------------------------------------------------------改动结束1
                    var modal = $(this)
                    //------------------------------------------------------------------改动开始2
                    // 给模态框中的表单绑定数据（处理常规的input标签）
                    modal.find('.modal-body #userId2').val(userId)
                    //------------------------------------------------------------------改动结束2
                })

            }
        }
    </script>
</head>

<body>
    <div class="container-fluid my-container">
        <!-- 页头 -->
        <ol class="breadcrumb" style="margin-top:5px;">
            <li><a href="#">主页</a></li>
            <li><a href="#">教师管理</a></li>
            <li class="active">教师列表</li>
        </ol>
        <!-- 检索框 -->
        <form class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" id="searchValue" placeholder="请输入关键字">
            </div>
            <button type="button" class="btn btn-primary" id="searchBtn">搜索</button>
            <!--        <button type="button" class="btn btn-danger">批量删除</button>-->
        </form>
        <!-- 内容 -->
        <div class="panel panel-default" style="margin-top: 10px;">
            <div class="panel-heading">
                <h3 class="panel-title">操作面板</h3>
            </div>
            <div class="panel-body">
                <!-- 表格 -->
                <table class="table table-hover table-condensed table-bordered table-striped">
                    <thead>
                        <!-- 标题行 -->
                        <tr>
                            <th>编号</th>
                            <th width="120">工号</th>
                            <th>姓名</th>
                            <th>头像</th>
                            <th>性别</th>
                            <th>手机</th>
                            <th>职称</th>
                            <th width="180">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 内容行 -->
                    </tbody>
                </table>
                <!-- 分页组件 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>


        <!-- 尾部 -->
        <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>
    </div>
    <!-- 模态框：实现教师信息的展示与修改-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <!-- 编辑界面的标题-->
                    <h4 class="modal-title" id="exampleModalLabel"
                        style="border-left: 5px solid dodgerblue;padding-left: 10px;">编辑教师信息</h4>
                </div>
                <div class="modal-body">
                    <!-- 表单（输入组件），从添加复制过来，改一改 -->
                    <form action="/SelectCourse2/teacher/update" method="post" id="myForm">
                        <!-- 编号，也就是主键ID,修改的时候一定要有这个，并且要设置为不可编辑（readonly）-->
                        <div class="form-group">
                            <label for="username">编<span
                                    style="color:transparent;user-select: none;">隐藏</span>号：</label>
                            <input type="text" class="form-control" name="userId" id="userId" readonly>
                        </div>
                        <!-- 账户，如果是自动添加的，就不能改变了-->
                        <div class="form-group">
                            <label for="username">学<span
                                    style="color:transparent;user-select: none;">隐藏</span>号：</label>
                            <input type="text" class="form-control" name="username" id="username" readonly>
                        </div>
                        <!-- 姓名 -->
                        <div class="form-group">
                            <label for="nickname">姓<span
                                    style="color:transparent;user-select: none;">隐藏</span>名：</label>
                            <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入姓名">
                        </div>
                        <!-- 性别：单选按钮-->
                        <div class="form-group">
                            <label for="nickname">性<span
                                    style="color:transparent;user-select: none;">隐藏</span>别：</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="gender" id="optionsRadios1" value="男">
                                    男
                                </label>
                                &nbsp;&nbsp;
                                <label>
                                    <input type="radio" name="gender" id="optionsRadios2" value="女">
                                    女
                                </label>
                            </div>
                        </div>
                        <!-- 电话-->
                        <div class="form-group">
                            <label for="phone">电<span style="color:transparent;user-select: none;">隐藏</span>话：</label>
                            <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入电话">
                        </div>
                        <!-- 职业-->
                        <div class="form-group">
                            <label for="rank">职<span style="color:transparent;user-select: none;">隐藏</span>称：</label>
                            <select class="form-control" id="rank">
                                <option class="disabled" disabled>请选择职称</option>
                                <option value="教授">教授</option>
                                <option value="副教授">副教授</option>
                                <option value="讲师">讲师</option>
                                <option value="助教">助教</option>
                                <option value="高级工程师">高级工程师</option>
                                <option value="中级工程师">中级工程师</option>
                                <option value="初级工程师">初级工程师</option>
                                <option value="助理工程师">助理工程师</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-btn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框：实现教师信息的删除-->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel2"
                        style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
                </div>
                <div class="modal-body">
                    确定删除当前老师？
                    <!-- 这里需要使用隐藏域绑定一个主键编号：所谓隐藏域，就是程序中能够读到，用户却看不见-->
                    <input type="hidden" id="userId2">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="del-btn">确认</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>